<div class="content">
    <div id="example_title">
        <h1>Lock/Unlock the Content</h1>
        If you need user to wait until popup is ready, you can lock it.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<button class="w2ui-btn" id="popup">Open Popup</button>

<!--CODE-->
<script type="module">
import { w2popup, query } from '__W2UI_PATH__'

query('#popup').on('click', popup)

function popup() {
    w2popup.open({
        width: 500,
        height: 300,
        title: 'Popup Title',
        text: 'Click on the "Lock" button or "Lock With a Message" to lock the message for 2 seconds. After 2 seconds it will be automatically unlocked.',
        showMax: true,
        actions: {
            Lock() {
                lock('')
            },
            "Lock With a Message"() {
                lock('Loading...')
            }
        }
    });
}

function lock(msg) {
    w2popup.lock(msg, true);
    setTimeout(function () { w2popup.unlock(); }, 1000);
}
</script>
